﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="InformationSystem.WebSite.Module.NoticeMgr.Contact" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        var addRow = function (store, record, ddSource) {
            // Search for duplicates
            var foundItem = store.findExact('userid', record.data.userid);

            // if not found
            if (foundItem == -1) {
                //Remove Record from the source
                store.add(record);
                // Call a sort dynamically
                //store.sort('Name', 'ASC');
            }
            ddSource.grid.store.remove(record);
        };

        var notifyDrop1 = function (ddSource, e, data) {
            // Loop through the selections
            Ext.each(ddSource.dragData.selections, function (record) {
                addRow(ContactStore, record, ddSource);
            });

            return true;
        };

        var notifyDrop2 = function (ddSource, e, data) {
            // Loop through the selections
            Ext.each(ddSource.dragData.selections, function (record) {
                addRow(SelectedUserStore, record, ddSource);
            });

            return true;
        };


        //---grid drag and rop custom text ------------------
        var getDragDropText = function () {
            var buf = [];

            buf.push("<ul>");

            Ext.each(this.getSelectionModel().getSelections(), function (record) {
                buf.push("<li>" + record.data.username + "</li>");
            });

            buf.push("</ul>");

            return buf.join("");
        };


        function CommitUser() {
            var selecttouser = '';

            GridPanel2.store.each(function (record) {
                selecttouser += record.data.username + '[' + record.data.userid + '],';
            });
            var pa = parent.document.getElementById('txtto');
            pa.value = selecttouser;
            var win = parent.Ext.getCmp('mywindow');
            if (win)
                win.hide();
        }

        function InitSelectUser() {
            var pa = parent.document.getElementById('txtto');
            var user = pa.value.split(',');
            var reg = /<.*>/;
            for (var i = 0; i < user.length; i++) {
                var result = reg.exec(user[i]);
                if (result == null) continue;
                var id = result[0].replace('[', '').replace(']', '');

                var foundItemindex = ContactStore.find('userid', id);
                // if  found
                if (foundItemindex != -1) {
                    var record = ContactStore.getAt(foundItemindex);

                    GridPanel2.store.add(record);
                }

            }
            //GridPanel2.save();

        }
        function onkey() { 
        }
        function addPeople(id, name) {
            var foundItem = GridPanel2.store.findExact('userid', id);
            if (foundItem == -1) {
                GridPanel2.insertRecord(0, {
                    username: name,
                    userid: id,
                    persondesp: ''
                });
            }
            //ComboBox1.clearValue();
        }
    </script>
    <style type="text/css">
        .search-item
        {
            font: normal 12px tahoma, arial, helvetica, sans-serif;
            padding: 3px 10px 3px 10px;
            border: 1px solid #fff;
            border-bottom: 1px solid #eeeeee;
            white-space: normal;
            color: #555;
        }
        
        .search-item h3
        {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }
        
        .search-item h3 span
        {
            float: right;
            font-weight: normal;
            margin: 0 0 5px 5px;
            width: 100px;
            display: block;
            clear: none;
        }
        
        p
        {
            width: 650px;
        }
        
        .ext-ie .x-form-text
        {
            position: static !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Store ID="ContactStore" runat="server">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="username" />
                    <ext:RecordField Name="userid" />
                    <ext:RecordField Name="persondesp" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="SelectedUserStore" runat="server">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="username" />
                    <ext:RecordField Name="userid" />
                    <ext:RecordField Name="persondesp" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Panel ID="Panel1" runat="server" Width="580" Height="400">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North MarginsSummary="5 5 5 5">
                    <ext:ComboBox ID="ComboBox1" runat="server" DisplayField="UserMail" ValueField="UserMail"
                        TypeAhead="false" LoadingText="查找中..." Width="570" PageSize="10" HideTrigger="true"
                        ItemSelector="div.search-item" MinChars="1" FieldLabel="输入你要搜索的姓名，学号" LabelWidth="150">
                        <Store>
                            <ext:Store ID="Store1" runat="server" AutoLoad="false">
                                <Proxy>
                                    <ext:HttpProxy Method="POST" Url="ContactAjax.aspx" />
                                </Proxy>
                                <Reader>
                                    <ext:JsonReader Root="people" TotalProperty="total">
                                        <Fields>
                                            <ext:RecordField Name="UserID" />
                                            <ext:RecordField Name="UserName" />
                                            <ext:RecordField Name="UserMail" />
                                            <ext:RecordField Name="Descp" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <Template ID="Template1" runat="server">
                            <Html>
                                <tpl for=".">
						  <div class="search-item" onclick="addPeople('{UserID}','{UserName}')">
							 <h3><span>{Descp}</span>{UserName}</h3>
							 {UserMail}
						  </div>
					   </tpl>
                            </Html>
                        </Template>
                        <Triggers>
                            <ext:FieldTrigger Icon="Clear" Qtip="清空" />
                        </Triggers>
                        <Listeners>
                            <TriggerClick Handler="this.clearValue();" />
                        </Listeners>
                        <Listeners>
                        <Select  Handler="addPeople(record.data.UserID,record.data.UserName)" />
                        </Listeners>
                    </ext:ComboBox>
                </North>
                <West MarginsSummary="5 5 5 5">
                    <ext:GridPanel ID="GridPanel1" runat="server" StoreID="ContactStore" DDGroup="secondGridDDGroup"
                        EnableDragDrop="true" StripeRows="true" AutoScroll="true" Width="300" Title="用户列表">
                        <ColumnModel>
                            <Columns>
                                <ext:Column ColumnID="Name" Header="名称" Width="80" DataIndex="username" />
                                <ext:Column ColumnID="id" Header="用户ID" Width="80" DataIndex="userid" />
                                <ext:Column ColumnID="descp" Header="用户描述" Width="110" DataIndex="persondesp" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <GetDragDropText Fn="getDragDropText" />
                        <BottomBar>
                            <ext:PagingToolbar runat="server" PageSize="30" DisplayInfo="false">
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </West>
                <Center MarginsSummary="5 5 5 0">
                    <ext:GridPanel ID="GridPanel2" runat="server" StoreID="SelectedUserStore" DDGroup="firstGridDDGroup"
                        EnableDragDrop="true" StripeRows="false" AutoExpandColumn="Name" Width="200"
                        Title="已选择用户" AutoScroll="true">
                        <ColumnModel>
                            <Columns>
                                <ext:Column ColumnID="Name" Header="名称" Width="80" DataIndex="username" />
                                <ext:Column ColumnID="id" Header="用户ID" Width="80" DataIndex="userid" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                        </SelectionModel>
                        <GetDragDropText Fn="getDragDropText" />
                        <BottomBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>
                                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                    <ext:Button ID="btnReset" runat="server" Text="重置">
                                        <Listeners>
                                            <Click Handler="ContactStore.loadData(ContactStore.proxy.data);SelectedUserStore.removeAll();" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="btnOk" runat="server" Text="确定">
                                        <Listeners>
                                            <Click Handler="CommitUser()" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Panel>
    <ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel1.view.scroller.dom}"
        Group="firstGridDDGroup">
        <NotifyDrop Fn="notifyDrop1" />
    </ext:DropTarget>
    <ext:DropTarget ID="DropTarget2" runat="server" Target="={GridPanel2.view.scroller.dom}"
        Group="secondGridDDGroup">
        <NotifyDrop Fn="notifyDrop2" />
    </ext:DropTarget>
    <input type="hidden" id="parentelementName" name="parentelementName" value="" />
    </form>
</body>
</html>
